<!DOCTYPE html>
<html>
<head>
    <title>title</title>
    <!-- pace -->
    <script src="/plugins/pace-0.7.5/pace.js"></script>
    <link href="/plugins/pace-0.7.5/themes/black/pace-theme-center-circle.css" rel="stylesheet" />
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <!-- Font Awesome -->
<%--    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">--%>
    <!-- Theme style -->
    <link rel="stylesheet" href="/css/AdminLTE.min.css">
    <link rel="stylesheet" href="/plugins/animate/animate.css">
    <!-- AdminLTE Skins. Choose a skin from the css/skins
         folder instead of downloading all of them to reduce the load. -->
    <link rel="stylesheet" href="/css/skins/my_all-skins.css">
    <!-- MyAdminLTE.css -->
    <link rel="stylesheet" href="/css/MyAdminLTE.css">
    <!-- Lobibox -->
    <link rel="stylesheet" href="/plugins/lobibox/css/lobibox.min.css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
<!--    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>-->
    <![endif]-->
</head>
<body class="hold-transition skin-blue sidebar-mini fixed">
<#include "left.ftl">
<div class="content-wrapper">
    <section class="content" id="app">
        <!--left-->
        <div class="col-md-5" style="padding: 0">
            <div class="box box-primary">
                <div class="box-body">
                    <form id="addForm" method="post">
                        <h3 style="padding-top:20px;"><strong>添加对战信息</strong></h3>
                        <div class="form-group">
                            <div class="form-group">
                                <label class="form-inline">第一选手信息</label><br>
                                <select class="form-control"  name="firstSingid">
                                    <option v-for="el in dataCommodity" :value="el.id">{{el.id}}---{{el.singname}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-inline">第二选手信息</label><br>
                                <select class="form-control"  name="secondSingid">
                                    <option v-for="el in dataCommodity" :value="el.id">{{el.id}}---{{el.singname}}</option>
                                </select>
                            </div>
                            <div class="form-group">
                                <label class="form-inline">状态</label>
                                <select class="form-control" id="type"  name="type">
                                    <option value="1">开启</option>
                                    <option value="0">关闭</option>
                                </select>
                            </div>
                            <div class="box-footer clearfix">
                                <a class="btn btn-success pull-right" v-on:click="addSubmit()">添加</a>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <!--right-->
        <div class="col-md-7">
            <div class="box box-primary">
                <table class="table table-hover">
                    <tr>
                        <td>对战编号</td>
                        <td>第一选手id</td>
                        <td>第一选手姓名</td>
                        <td>第二选手id</td>
                        <td>第二选手姓名</td>
                        <td>状态</td>
                        <td>操作1</td>
                        <td>操作2</td>
                    </tr>
                    <tr v-for="el in dataStaff" :id="el.id">
                        <td>{{el.id}}</td>
                        <td>{{el.firstSingid}}</td>
                        <td>{{el.firstSingname}}</td>
                        <td>{{el.secondSingid}}</td>
                        <td>{{el.secondSingname}}</td>
                        <td>
                            <span v-if="el.type==0">关闭</span>
                            <span v-if="el.type==1">开启</span>
                            <span v-if="el.type==2">终止</span>
                        </td>
                        <td>
                            <span v-if="el.type==0"> <button v-on:click="editSingOpen(el)">开启</button></span>
                            <span v-if="el.type==1"> <button v-on:click="Singshutdown(el)">关闭</button></span>
                        </td>
                        <td>
                            <span v-if="el.type==1"> <button v-on:click="battleZhongzhi(el)">终止</button></span>
                        </td>
                    </tr>
                </table>
            </div>
            <strong><span>同时间只能开启一场比赛</span></strong>
        </div>

    </section>
</div>
<!-- jQuery 2.2.3 -->
<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Bootstrap 3.3.6 -->
<script src="/js/bootstrap.min.js"></script>
<!--vue-->
<script src="/plugins/vue/vue.js"></script>
<!-- SlimScroll -->
<script src="/plugins/slimScroll/jquery.slimscroll.min.js"></script>
<!-- FastClick -->
<script src="/plugins/fastclick/fastclick.js"></script>
<!-- AdminLTE App -->
<script src="/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="/js/demo.js"></script>
<script src="/plugins/echarts/echarts.min.js"></script>
<script src="/plugins/lobibox/js/lobibox.min.js"></script>
<script src="/js/common.js"></script>
<script>
    $(document).ready(function() {

    });

    $(function() {
        getAllTag();
        getAllCommodity();

    });


    getAllTag();
    var vm=new Vue({
        el:'#app',
        data: {
            dataStaff: {},
            dataCommodity:{}
        },
        methods: {
            getAllTag:function(){
                getAllTag();
            },
            getAllCommodity:function () {
                getAllCommodity();
            },
            editSingOpen:function (singsInfo) {
                SingOpen(singsInfo);
            },
            Singshutdown:function (singsInfo) {
                Singshutdown(singsInfo);
            },
            addSubmit:function () {
                addSubmit();
            },
            battleZhongzhi:function (battle) {
                battleZhongzhi(battle);
            }


        }
    });
    //查询所有对战信息
    function getAllTag() {
        $.post("/battle/allbattles", function(result){
            console.log(JSON.stringify(result));
            result=eval(result);
            console.log(JSON.stringify(result));
            vm.dataStaff = result;
        });
    }
    //查询所有选手信息
    function getAllCommodity() {
        $.post("/sing/allSingsByType", function(result){

            vm.dataCommodity = result;
        });

    }



    function successFn(data) {
        alert("1");
    }
    function errorFn(data) {
        alert("失败");
    }

    function addSubmit(){
        ajaxSubmitForm("/battle/addBattles",$("#addForm").serialize(),success,errorFn);
        function success(data){
            getAllTag(0);
            alert("成功");
        }

    }

    /*开启选手方法*/
    function SingOpen(singsInfo) {

        if (confirm("是否要开启此对战?") == false) {
            return;
        }

        ajaxSubmit("/battle/updateSingOpen",JSON.stringify(singsInfo),sucess1,errorFn);
        function sucess1(data){
            getAllTag();
            alert("成功");
        }



    }
    //关闭选手方法
    function Singshutdown(id) {

        if (confirm("是否要关闭此对战?") == false) {
            return;
        }
        ajaxSubmit("/battle/updateSingShutdoun",JSON.stringify(id),sucess1,errorFn);
        function sucess1(data){
            getAllTag();
            alert("成功");
        }


    }
    //终止对战
    function  battleZhongzhi(battle) {
        if (confirm("是否要终止此对战?一旦终止，不可再开启") == false) {
            return;
        }
        ajaxSubmit("/battle/updateBattleZhongzhi",JSON.stringify(battle),sucess1,errorFn);
        function sucess1(data){
            getAllTag();
            alert("成功");
        }
    }



</script>
</body>
</html>
